<template>
    <basic-container class="noScrollBar tabMain-wrap">
        <avue-crud :option="detailOptions.options" :table-loading="loading" :data="data" :page.sync="page" ref="crud"
            v-model="form" :permission="permissionList" @row-save="rowSave" @row-update="rowUpdate"
            @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
            @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
            :upload-after="uploadAfter" @on-load="onLoad">
            <template slot-scope="{ row }" slot="menu">
                <el-button @click="rowDel(row)" v-show="userInfo.user_id == row.createUser" type="text" size="small"
                    icon="el-icon-remove">删除</el-button>
                <el-button @click="rowEditForm(row)" v-show="userInfo.user_id == row.createUser" type="text"
                    size="small" icon="el-icon-edit">编辑</el-button>
                <!-- <el-button @click="print(row)" type="text" size="small" icon="el-icon-mouse">文档下载</el-button> -->
            </template>
        </avue-crud>
        <el-drawer :visible.sync="showAddMenuDrawer" :direction="'ltr'" :title="caseTit" :size="'75%'" :center="false"
            :modal="false" :destroy-on-close="true">
        </el-drawer>
    </basic-container>
</template>
<script>
import { mapGetters } from "vuex";
import { getToken } from '@/util/auth';
import {
    getSyjcAttorneyList,
    yqybFormSave,
    yqybFormUpdate,
    yqybFormRemove,
    filePrint,
} from "@/api/sxdky/sxdky";
export default {
    data() {
        return {
            // 文件预览
            filePrint: filePrint,
            forms: "",
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            data: [],
            url:'',
            name: '',
            res: '',
            infoData: [],
            detailOptions: {
                label: "文件管理",
                name: "fileList",
                options: {
                    //   height: "calc(100vh - 425px)",
                    // menuDelBtn: true,
                    // menuUpBtn: false,
                    //   menuDownBtn: true,
                    //   dialogDirection: "ltr",
                    //   dialogType: "drawer",
                    //   calcHeight: 30, ////表格高度差（主要用于减去其他部分让表格高度自适应）
                    //   tip: false,
                    emptyText: "暂无数据哦~",//数据为空的提示
                    searchShow: true, //false则关闭所有的搜索栏
                    border: true, // 表格边框是否显示
                    index: true, //开启序号
                    indexLabel: "序号", //序号名称为 “序号”
                    // selection: true, //表格勾选框
                    excelBtn: true, //表格左上导出按钮是否显示,默认否
                    //   dialogClickModal: false,
                    //   menuOtherBtn: true, //自定义操作按钮，下载上传
                    //   gistBtn: false,
                    align: "center", // 表格内内容居中
                    //   menuAlign: "center",
                    searchIcon: true, //搜索栏的展开收缩功能
                    //   searchIndex: 3,
                    searchSpan:6,      //表格顶部搜索框长度  最大长度2     
                    searchBtn: true,  //表格顶部大的搜索按钮。默认为true 
                    searchMenuSpan: 6,  //搜索按钮长度
                    refreshBtn: true, //表格右上 小的 刷新按钮。默认为true
                    columnBtn: true,  //表格右上 小的 列表按钮。默认为true
                    labelWidth: 120, //修改行距
                    menu: true, // 是否显示操作栏，默认为true
                    viewBtn: false,// 操作栏里面的查看按钮，默认为true
                    addBtn:true,  //表格左上角是否显示添加按钮，默认为true
                    editBtn: false, //操作栏里面的编辑按钮，默认为true
                    delBtn: false, // 操作栏里面的删除按钮，默认为true
                    //   defaultExpandAll:true, //树状目录默认展开
                    column: [
                        {
                            label: "委托编号",
                            prop: "code",
                            search: false,
                            display: false,
                            rules: [{
                                required: true,
                                message: "请输入委托编号",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "厂商",
                            prop: 'firmName',
                            display: false
                        },
                        {
                            label: "任务分类",
                            prop: "type",
                            type: "select",
                            search: true,
                            display: false,
                            dicData: [
                                {
                                    label: "技术监督",
                                    value: 1,
                                },
                                {
                                    label: "技术服务",
                                    value: 2,
                                },
                                {
                                    label: "基建调试",
                                    value: 3,
                                },

                            ]

                        },
                        {
                            label: "联系人",
                            prop: "contacts",
                            search: false,
                            display: false
                        },
                        {
                            label: "联系方式",
                            prop: "personalContact",
                            search: false,
                            adisplay: false
                        },
                          {
                            label: "进度状态",
                            prop: "personalContact",
                            search: true,
                            display: false
                        },
                        {
                            label: "提交日期",
                            prop: "submitTime",
                            type: "date",
                            display: false,
                            sortable: true,
                        },
                        ],
                    group: [
                        {
                            label: '委托单详情',
                            column: [
                            {
                                label: "委托编号",
                                prop: "code",
                                search: false,
                                addDisplay: true,
                                editDisplay: false,
                                viewDisplay: true,
                                overHidden: true,
                                rules: [{
                                    required: true,
                                    message: "请输入委托编号",
                                    trigger: "blur"
                                    }]
                                },
                                {
                                    label: "厂商",
                                    prop: 'firmName',
                                    display:true,
                                    rules: [{
                                        required: true,
                                        message: "请输入厂商名称",
                                        trigger: "blur"
                                    }]
                                },
                                {
                                    label: "任务分类",
                                    prop: "type",
                                    type: "select",
                                    search: true,
                                    addDisplay: true,
                                    editDisplay: true,
                                    viewDisplay: true,
                                    overHidden: true,
                                    dicData: [
                                        {
                                            label: "技术监督",
                                            value: 1,
                                        },
                                        {
                                            label: "技术服务",
                                            value: 2,
                                        },
                                        {
                                            label: "基建调试",
                                            value: 3,
                                        },

                                    ]

                                },
                                {
                                    label: "联系人",
                                    prop: "contacts",
                                    search: false,
                                    addDisplay: true,
                                    editDisplay: false,
                                    viewDisplay: false,
                                    overHidden: true,
                                },
                                {
                                    label: "联系方式",
                                    prop: "personalContact",
                                    search: false,
                                    addDisplay: true,
                                    editDisplay: false,
                                    viewDisplay: false,
                                    overHidden: true,
                                },
                                {
                                    label: "进度状态",
                                    prop: "personalContact",
                                    search: true,
                                    addDisplay: true,
                                    editDisplay: false,
                                    viewDisplay: true,
                                    overHidden: true,
                                },
                                {
                                    label: "提交日期",
                                    prop: "submitTime",
                                    type: "date",
                                    sortable: true,
                                    addDisplay: true,
                                    editDisplay: false,
                                    viewDisplay: false,
                                    overHidden: false,
                                    format: "yyyy-MM-dd hh:mm:ss",
                                    valueFormat: "yyyy-MM-dd hh:mm:ss",
                                    rules: [{
                                        required: true,
                                        message: "请输入提交时间",
                                        trigger: "click",
                                    }],
                                }
                            ]
                        },               
                    ]
                },
                url: {
                    getList: getSyjcAttorneyList,
                    remove: yqybFormRemove,
                    update: yqybFormUpdate,
                    add: yqybFormSave,
                },
            },
        };
    },
    components: {},
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        permissionList() {
            return {
                addBtn: this.vaildData(this.permission.dnzl_add, false),
                viewBtn: this.vaildData(this.permission.dnzl_add, false),
                delBtn: this.vaildData(this.permission.dnzl_add, false),
                editBtn: this.vaildData(this.permission.dnzl_add, false),
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach((ele) => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
    },
    methods: {
        // 保存
        rowSave(row, done, loading) {
            row.payProof = this.payProof;
            this.detailOptions.url.add(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        // 调用编辑表单
        rowEditForm(row) {
            this.$refs.crud.rowEdit(row);
        },
        // 更新
        rowUpdate(row, index, done, loading) {
            this.detailOptions.url.update(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        // 删除
        rowDel(row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return this.detailOptions.url.remove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        // 打印下载
        print(row) {
            console.log(this.url)
            console.log(this.res)
            window.open(this.filePrint + `?id=${row.id}&${this.website.tokenHeader}=${getToken()}`);
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        listAllDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return this.detailOptions.url.remove(this.ids);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            let values = {
                ...params,
            };
            this.loading = true;
            this.detailOptions.url.getList(page.currentPage, page.pageSize, values)
                .then((res) => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.data = data.records;
                    this.loading = false;
                    this.selectionClear();
                });
        },
        selInfoChange(list) {
            console.log(list)
        },
        saveMenuData(row) {
            let selArr = [];
            this.selList.forEach(item => {
                selArr.push(item.id)
            })
            let selData = {
                id: row.id,
                ids: selArr.toString()
            }
            this.detailOptions.menuUrl.saveMenu(selData).then(
                () => {
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    this.showAddMenuDrawer = false;
                },
                (error) => {
                    window.console.log(error);
                }
            );
        },
        selMenuChange(list) {
            this.selList = list;
        },

        // 上传回调
        uploadAfter(res, done) {
            this.form.name = res.name;
            this.form.url = res.url;
            done();
        },
        cancelSignItem(rowData) {
            console.log(rowData)
        },
        cancelSign() {
            console.log(this.selectionList)
        },
    }
};
</script>

<style lang='scss'>

.tabMain-wrap {
    // height: calc(100vh - 400px);
    overflow: hidden auto;
}

.fileConList {
    p {
        margin: 0;
    }

    .scrollDiv {
        height: calc(100% - 90px);
        overflow: auto;
    }
}
</style>


